<!-- 后台主页 -->
<template>
  <!-- 知识点：
   Container 布局容器
   用于布局的容器组件，方便快速搭建页面的基本结构：

   <el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

   <el-header>：顶栏容器。    <el-header> 实际等价于   <div class="el-header">

   <el-aside>：侧边栏容器。

   <el-main>：主要区域容器。

   <el-footer>：底栏容器。
 src="https://img0.baidu.com/it/u=3469714326,3634763101&fm=26&fmt=auto&gp=0.jpg"
   https://element-plus.gitee.io/#/zh-CN/component/container
   -->

<!-- 外部容器 -->
  <el-container class="home-container">
    <!-- 1.头部区域 -->
    <el-header>
      <el-row style="height: 100%" type="flex" align="middle" >
        <el-col :span="12">
          <span class="title" @click="toIndex">酒店客房后台管理系统</span>
        </el-col>

        <el-col :span="12" style="text-align: right">
          <el-avatar
            shape="square"
            size="large"
           src="https://img0.baidu.com/it/u=3469714326,3634763101&fm=26&fmt=auto&gp=0.jpg"
          ></el-avatar>
          <span class="logout" @click="logout">退出</span>
        </el-col>
      </el-row>
    </el-header>

    <!-- 2.页面主体区域 -->
    <el-container>
      <!-- 2.1侧边栏 菜单
      vue里的数据绑定
      -->
      <el-aside width="275px">

        <!-- el-menu 菜单主容器
        default-active：当前激活菜单的 index
        router：是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
        unique-opened：是否只保持一个子菜单的展开
        index：
     
     菜单结构
     el-menu:主
        el-submenu：一级
           el-menu-item：二级
         -->
        <el-menu
          default-active="/homework"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          router
          unique-opened
          background-color="#333744"
          text-color="#fff"
          active-text-color="#409EFF"
        >
        <el-menu-item index="/roomReserve">
              <!-- 二级菜单模板 -->
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-s-claim"></i>
                <!-- 文本 -->
                <span>客房预订管理</span>
              </template>
            </el-menu-item>
        


            <el-menu-item index="/roomChangeManagement">
              <!-- 二级菜单模板 -->
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-chat-line-round "></i>
                <!-- 文本 -->
                <span>入住信息管理</span>
              </template>
            </el-menu-item>

            <!-- <el-menu-item index="3-1"> -->
              <!-- 二级菜单模板 -->
              <!-- <template slot="title"> -->
                <!-- 图标 -->
                <!-- <i class="el-icon-menu"></i> -->
<!--                <i class="el-icon-document-checked"></i>-->
                <!-- 文本 -->
                <!-- <span>预定转入住</span> -->
              <!-- </template> -->
            <!-- </el-menu-item> -->

            <!-- <el-menu-item index="/roomChangeManagement"> -->
              <!-- 二级菜单模板 -->
              <!-- <template slot="title"> -->
                <!-- 图标 -->
                <!-- <i class="el-icon-menu"></i> -->
                <!-- 文本 -->
                <!-- <span>换房管理</span> -->
              <!-- </template> -->
            <!-- </el-menu-item> -->

            <el-menu-item index="/checkoutManage">
              <!-- 二级菜单模板 -->
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-shopping-cart-2"></i>
                <!-- 文本 -->
                <span>结账管理</span>
              </template>
            </el-menu-item>



          <el-submenu index="1">
            <!-- 一级菜单 -->
            <template slot="title">
              <i class="el-icon-chat-dot-square"></i>
              <span slot="title" class="menu">基础信息管理</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item index="/roomType">
              <!-- 二级菜单模板 -->
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>客房类型</span>
              </template>
            </el-menu-item>

            <el-menu-item index="/floorInfo">
              <!-- 二级菜单模板 -->
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>楼层管理</span>
              </template>
            </el-menu-item>

            <el-menu-item index="/commodityCategory">
              <!-- 二级菜单模板 -->
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>商品类别管理</span>
              </template>
            </el-menu-item>

            <el-menu-item index="/commodityManage">
              <!-- 二级菜单模板 -->
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>商品管理</span>
              </template>
            </el-menu-item>

            <el-menu-item index="/memberInfo">
              <!-- 二级菜单模板 -->
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>会员管理</span>
              </template>
            </el-menu-item>

          </el-submenu>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-shopping-bag-2"></i>
              <span slot="title" class="menu">消费管理</span>
            </template>

            <el-menu-item index="2-1">
              <!-- 二级菜单模板 -->
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>附加消费入账</span>
              </template>
            </el-menu-item>
          </el-submenu>
        

        <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-price-tag"></i>
              <span slot="title" class="menu">客房管理</span>
            </template>

            <el-menu-item index="/roomInfoManagement">
              <!-- 二级菜单模板 -->
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>客房信息管理</span>
              </template>
            </el-menu-item>

          </el-submenu>


        
           

        


          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-notebook-2"></i>
              <span slot="title" class="menu">报表管理</span>
            </template>

            <el-menu-item index="/reserve">
              <!-- 二级菜单模板 -->
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>预定客人报表</span>
              </template>
            </el-menu-item>

            <el-menu-item index="inLive">
              <!-- 二级菜单模板 -->
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>在住客人报表</span>
              </template>
            </el-menu-item>

<!--             <el-menu-item index="">-->
<!--              &lt;!&ndash; 二级菜单模板 &ndash;&gt;-->
<!--              <template slot="title">-->
<!--                &lt;!&ndash; 图标 &ndash;&gt;-->
<!--                <i class="el-icon-menu"></i>-->
<!--                &lt;!&ndash; 文本 &ndash;&gt;-->
<!--                <span>商品入账报表</span>-->
<!--              </template>-->
<!--            </el-menu-item>-->

<!--             <el-menu-item index="5-4">-->
<!--              &lt;!&ndash; 二级菜单模板 &ndash;&gt;-->
<!--              <template slot="title">-->
<!--                &lt;!&ndash; 图标 &ndash;&gt;-->
<!--                <i class="el-icon-menu"></i>-->
<!--                &lt;!&ndash; 文本 &ndash;&gt;-->
<!--                <span>财务进账报表</span>-->
<!--              </template>-->
<!--            </el-menu-item>-->
          </el-submenu>


        <el-submenu index="6">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span slot="title" class="menu">系统管理</span>
            </template>

            <el-menu-item index="/userManage">
              <!-- 二级菜单模板 -->
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>用户管理</span>
              </template>
            </el-menu-item>

            <!-- <el-menu-item index="6-2">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>日志管理</span>
              </template>
            </el-menu-item> -->
          </el-submenu>
          <!-- <el-menu-item index="/model">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>Model</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/welcome">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>欢迎欢迎，热烈欢迎</span>
              </template>
            </el-menu-item> -->
        </el-menu>
      
      </el-aside>

      <!-- 2.2主体结构 -->
      <el-main>
        <!-- 路由占位符,子菜单内容注入到这里展示， 子菜单注册到Home的子路由-->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>

  
</template>

<script>
export default {
  // 变量
  data() {
    return {
      // 左侧菜单数据
      menuList: []

     
    };
  },

  // 生命周期函数
  created() {

  },

  // 自定义函数
  methods: {

    toIndex(){
      this.$router.push("/welcome")
    },
    getMenusList(){},

    handleOpen(key, keyPath) {
      //console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      //console.log(key, keyPath);
    },

    // 退出
    logout() {
      window.sessionStorage.clear(); // 清空
      this.$router.push("/login");
    },
  },
};
</script>

<!-- less / scoped-->
<style  scoped>
.home-container {
  height: 100%;
}

.el-header {
  background-color: #373d41;
  color: #fff;
}

.el-header .title {
  font-size: 35px;
  font-weight: bold;
}
.el-header img {
  font-size: 0;
  vertical-align: middle;
}
.el-header .logout {
  vertical-align: middle;
  font-size: 15px;
  padding-left: 15px;
}
.el-aside {
  background-color: #333744;
}

/* .el-aside .title{
  font-size: 50px;
  padding-left: 50px;

} */


.el-submenu .title{
  font-size: 25px;
}
/**二级菜单title */
.el-menu-item
{
  font-size: 20px;
}
.menu{
  font-size: 20px;
}

.el-aside .el-menu {
  border-right: none;
  font-size: 50px;
}
.el-main {
  background-color: #eaedf1;
}
</style>
